import { DoubleLeftOutlined } from '@ant-design/icons';
import { Collapse, DatePicker, Select } from 'antd';
import IconFont from '@/components/IconFont';
import moment from 'moment';
import { useMemo } from 'react';
import Style from '../../index.module.less';
import { useFilterFieldsConfig } from '../../store';
import FieldWrapper from '../FieldWrapper';
import { orderTimeItem, orderTypeFilterItem } from '@/pages/OrderModule/orderList/components/Filter/constant.js';

const { Panel } = Collapse;
const { Option } = Select;
const { RangePicker } = DatePicker;

/**
 * @desc: 筛选框：订单时间组件
 */
export const OrderTime = ({ value, onChange, ...args }) => {
  // const [range, setRange] = useState(null); //时间范围

  const { checkingMap } = useFilterFieldsConfig();

  const range = useMemo(() => {
    if (value.timeType === 'ecPayTime') {
      return [value.ecPayTimeMin ? moment(value.ecPayTimeMin) : null, value.ecPayTimeMax ? moment(value.ecPayTimeMax) : null];
    } else if (value.timeType === 'checkTime') {
      return [value.checkTimeMin ? moment(value.checkTimeMin) : null, value.checkTimeMax ? moment(value.checkTimeMax) : null];
    } else if (value.timeType === 'deliveryTime') {
      return [value.deliveryTimeMin ? moment(value.deliveryTimeMin) : null, value.deliveryTimeMax ? moment(value.deliveryTimeMax) : null];
    } else {
      return [];
    }
  }, [value]);

  const triggerChange = (changedValue) => {
    onChange?.({ ...value, ...changedValue });
  };
  const handleTimeTypeChange = (type) => {
    triggerChange({ [value.timeType + 'Min']: '', [value.timeType + 'Max']: '' });
    triggerChange({ timeType: type });
  };

  const onChangeTime = (date) => {
    const [start, end] = date || [];
    triggerChange({ [value.timeType + 'Min']: start?.valueOf(), [value.timeType + 'Max']: end?.valueOf() });
  };

  return (
    <>
      {Object.values(orderTimeItem).every(item => checkingMap[item] === false) ?
        <div style={{ marginBottom: -6 }} /> :
        <Collapse
          bordered={false}
          defaultActiveKey={['orderTime']}
          expandIcon={({ isActive }) => <DoubleLeftOutlined rotate={isActive ? 270 : 90} style={{ fontSize: '16px', color: '#4E5969' }} />}
          expandIconPosition="end"
          className={Style['filter-item-collapse']}
        >
          <Panel header="订单时间" key="orderTime" className={Style['filter-item-collapse-panel']}>
            {/** 时间类型 */}
            {checkingMap.ecPayTime && (
              <FieldWrapper>
                <Select value={value.timeType} placeholder="选择付款时间" onChange={handleTimeTypeChange}>
                  <Option value="ecPayTime">平台付款时间</Option>
                  <Option value="checkTime">订单审核时间</Option>
                  <Option value="deliveryTime">订单发货时间</Option>
                </Select>
              </FieldWrapper>
            )}

            {/** 时间 */}
            {checkingMap.deliveryTimeMin && (
              <FieldWrapper>
                <RangePicker value={range} format="YYYY-MM-DD HH:mm:ss:SSS" showTime onChange={onChangeTime} />
              </FieldWrapper>
            )}

            {/** 剩余发货时间 */}
            {checkingMap.ecLastDeliveryTime && (
              <FieldWrapper>
                <Select value={value.ecLastDeliveryTime} placeholder="请选择剩余发货时间" allowClear onChange={(v) => triggerChange({ ecLastDeliveryTime: v })} clearIcon={<IconFont type="iconguanbi2fill" style={{fontSize:'14px'}} />}>
                  <Option value="1">已超时</Option>
                  <Option value="2">12小时内</Option>
                  <Option value="3">24小时内</Option>
                  <Option value="4">3天内</Option>
                </Select>
              </FieldWrapper>
            )}
          </Panel>
        </Collapse>
      }
    </>
  );
};

export default OrderTime;
